<template>

  <div class="img" :style="note">



    <div style="width: 300px;height: 900px;background-color: rgba(0,0,0,0.01);margin:0px auto;text-align: center;position: relative">
      <div style="width: 300px;height: 500px;background-color: rgba(0,0,0,0.6);text-align: center;position: absolute;margin-top: 100px">

    <p style="font-size: 28px;font-family: '楷体';padding-top: 20px;color: slategray">修改信息</p>
    <hr style="width: 90%;height: 0.01px"/>
    <div >
      <div class="hello">
        <div style="margin-left: 50px">
          <h1>{{ msg }}</h1>
          <form>
            <input type="file" @change="getFile($event)"style="color: slategray">
            <button class="button button-primary button-pill button-small" @click="submit($event)">提交</button>
          </form>
        </div>
        <div>
        </div>
      </div>
      <div style="margin-top: 20px">
        <el-input v-model="RegisterInputName" placeholder="请输入用户名" style="width: 70%"></el-input>
        <el-input v-model="RegisterInputPassword" type="password" placeholder="请输入密码" style="width: 70%;margin-top: 10px"></el-input>
        <el-input v-model="RegisterInputPhone" placeholder="请输入手机号" style="width: 70%;margin-top: 10px"></el-input>
        <el-button plain style="margin-top: 20px;width: 100px" size="small" @click="register()">修改信息</el-button>
      </div>
    </div>
  </div>
    </div>
  </div>
</template>

<script>

  export default {

    data() {
      return {
        note: {
          backgroundImage: "url(" + require("../assets/img/starrr.jpg") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "1890px 1500px",
        },
        RegisterInputName:'',
        RegisterInputPassword:'',
        RegisterInputPhone:'',
        photoUrl:'',
      }
    },
    methods:{
      changePage(){
        this.changeType = ! this.changeType
      },
      getFile: function (event) {
        this.file = event.target.files[0];
        console.log(this.file);
      },
      submit: function (event) {
        //阻止元素发生默认的行为
        var _this=this
        event.preventDefault();
        let formData = new FormData();
        // console.log(formData)
        formData.append("file", this.file)
        axios.post('/upload/singlefile', formData)
          .then(function (response) {
            //   console.log(response)
            alert(response.data);
            var a= response.data;
            //  var e=a.split("*");
            //console.log(e[1])
            _this.photoUrl=a;

            // window.location.reload();
          })
          .catch(function (error) {
            alert("上传失败");
            console.log(error);
            //window.location.reload();
          });
      },
      register(){
        var user = JSON.parse(window.sessionStorage.getItem("user"));
        var ff=user.id
        if(this.RegisterInputName==""||this.RegisterInputName==null){
          this.RegisterInputName= user.userName
        }
        console.log(this.photoUrl);
          axios.post('/user/upInfo',{
            userName : this.RegisterInputName,
            password : this.RegisterInputPassword,
            phone:this.RegisterInputPhone,
            photoUrl:this. photoUrl,
            id:ff
          }).then((response) => {

            if(response.data.states==888){
              console.log(response)
              this.$notify({
                title: '成功',
                message: '注册成功',
                type: 'success',
                duration:2000
              });
              this.$router.replace('/Info');
            } else{
              this.$notify.error({
                title: '错误',
                message: '错误',
                type: 'warning',
                duration:0
              });
            }
          }).catch((response)=>{

          })


      },

    }
  }
</script>
